import React,{ Component } from 'react';
import {
	StyleSheet,
	View,
	Text,
	Image,
	TouchableOpacity,
	TextInput,
	Button,
	ScrollView
} from 'react-native';
import Toast, {DURATION} from 'react-native-easy-toast';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import Axios from '../../axios';
class HeaderLeft extends Component{
	render(){
		return (<TouchableOpacity
				onPress={()=>this.props.goBack()}
			>
			<Image
				style={styles.topLeftImg}
				source={require('../../assets/images/back_icon.png')}
			/>
		</TouchableOpacity>)
	}
}
class NextStep extends Component{
	render(){
		return  <TouchableOpacity
					onPress={()=>this.props.nextStep()}
				>
					<View>
						<Text style={{color:'#fff',fontSize:16,marginRight:5}}>下一步</Text>
					</View>
				</TouchableOpacity>
	}
}
let  initCount = 0;
export default class NetMaintainThirdStep extends Component{
	constructor(props) {
	  super(props);
		this.inputValues={};
	}
	state = {
		resultObj:{},
		allCount:0,
		inputValue:""
	}
	static navigationOptions = ({navigation,navigationOptions})=>{
		const selectProductList = navigation.getParam("productList");
		const name = navigation.getParam("name");
		const policyId = navigation.getParam("policyId");
		const policyType = navigation.getParam("policyType");
		const productIds = navigation.getParam("productIds");
		return {
			title:name,
			headerLeft:<HeaderLeft goBack={()=>navigation.navigate("NetMaintainSecondStep")}/>,
			headerRight: <NextStep nextStep={()=>{
							var selectProductList=new Array()
							var k = 0;
							var allCount = 0;
							var flag = true;
							var inputValues = navigation.getParam("inputValues")
							for(let i in inputValues){
								if(inputValues[i]==''){
									flag = false;
									break;
								}
								allCount+=inputValues[i]*1;
								selectProductList[k++]=i.replace('p_'+policyId.value+'_','')+'|临时占位|'+inputValues[i];
							}
							if(flag&&allCount>0){
								navigation.navigate("NetMaintainFinalStep",{
								name:navigation.getParam("name"),
								policyId:policyId,
								productIds:productIds,
								allCount:allCount,
								policyType:policyType,
								selectProductList:selectProductList,
								productList:navigation.getParam("productList")
								})
							}else{
								navigation.getParam('toast').show('请输入营销人数',3);
							}
						}} />,
			headerStyle:{
				...navigationOptions.headerStyle,
				backgroundColor:"#f54545"
			},
			headerTitleStyle:{
				fontSize:18,
				flex:1,
				textAlign:'center'
			}
		}
	}
	componentDidMount() {
		 this.initCount = this.getInputView(this.props.navigation.state.params.productList);
		 this.getResultForecast(this.props.navigation.state.params.productIds,this.props.navigation.state.params.policyId.value);
		 this.props.navigation.setParams({
		 	toast:this.refs.toast
		 });
	}
	getResultForecast = (products,policyId)=>{
		let ps = products.map(
                    (element)=>{
                        return 'p_'+policyId+'_'+element+'|'+this.initCount;
                    });
		Axios.ajax({
			url:'/mkt/resultForecast',
			data:{'products': ps}
		}).then((res)=>{
			this.setState({resultObj:res.data});
		})
	}

	submitResultForecast = ()=>{
		var myArray=new Array()
		var k = 0;
		var allCount = 0;
		var flag = true;
		for(let i in this.inputValues){
			if(this.inputValues[i]==''){
				flag = false;
				break;
			}
			allCount+=this.inputValues[i]*1;
			myArray[k++]=i+'|'+this.inputValues[i];
		}
		if(flag&&allCount>0){
			Axios.ajax({
			url:'/mkt/resultForecast',
			data:{'products': myArray}
			}).then((res)=>{
				this.setState({resultObj:res.data,allCount:allCount});
			})
		}else{
			this.refs.toast.show('请输入营销人数',3);
		}
	}


	getInputView = (products)=>{
			let allCount = 0;
			let inputView = products.map(
                    (element)=>{
                    	if(this.props.navigation.state.params.productIds.includes(element.productId)){
                    	this.inputValues['p_'+this.props.navigation.state.params.policyId.value+'_'+element.productId]=element.productCount;
                    	this.props.navigation.setParams({
					 	inputValues:this.inputValues
					 	});
                    	allCount=allCount+element.productCount*1;
						return <View>
									<Text style={styles.label}>{element.productName}：</Text>
									<TextInput 
								        style={styles.textInput} 
								         ref={component => this['input_'+element.productId] = component}
								         onChangeText={(text) => {
										    var regu = /^(0|\+?[1-9][0-9]*)$/;
										    if (!regu.test(text)) {
												this['input_'+element.productId].setNativeProps({ text: '' });
												this.inputValues['p_'+this.props.navigation.state.params.policyId.value+'_'+element.productId]='';
												this.props.navigation.setParams({
												 	inputValues:this.inputValues
												 });
       										}else{
											    if((element.productCount*1)>=(text*1)){
													this.inputValues['p_'+this.props.navigation.state.params.policyId.value+'_'+element.productId]=text;
													this.props.navigation.setParams({
												 	inputValues:this.inputValues
												 	});
											    }else{
													this['input_'+element.productId].setNativeProps({ text: '' });
											    }
       										}
										  }}
								        defaultValue={element.productCount}
								        underlineColorAndroid={'transparent'}//去掉下划线
								        keyboardType="numeric"
								        editable={true}
								    />
								</View>
                    	}
                    });
              this.setState({inputView:inputView,allCount:allCount});
              return allCount;
	}
	render(){
		return (
			<ScrollView  keyboardShouldPersistTaps={true}>
				<KeyboardAwareScrollView
				  keyboardShouldPersistTaps={true}
			      resetScrollToCoords={{ x: 0, y: 0 }}
			      contentContainerStyle={styles.container}
			      scrollEnabled={false}
			    >
				<View style={styles.stepWrap}>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step_active01.png')}
						/>
						<Text style={[styles.stepTxt,styles.stepTxtActive]}>用户筛选</Text>
					</View>
					<View style={[styles.stepLine,styles.stepLineActive]}></View>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step_active02.png')}
						/>
						<Text style={[styles.stepTxt,styles.stepTxtActive]}>产品匹配</Text>
					</View>
					<View style={[styles.stepLine,styles.stepLineActive]}></View>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step_active03.png')}
						/>
						<Text style={[styles.stepTxt,styles.stepTxtActive]}>效果评估</Text>
					</View>
					<View style={styles.stepLine}></View>
					<View style={styles.stepItem}>
						<Image 
							style={styles.stepImage}
							source={require('../../assets/images/step04.png')}
						/>
						<Text style={styles.stepTxt}>触点匹配</Text>
					</View>
				</View>
				<View style={styles.policyContent}>
					<View style={styles.policyTitle}>
						<Image 
							style={styles.policyImage}
							source={require('../../assets/images/title_icon02.png')}
						/>
						<Text style={styles.policyTitleText}>效果匹配</Text>
					</View>
					<View style={styles.effectContent}>
						<View>
							<Text style={styles.totalTextTitle}>营销人数</Text>
							<Text style={styles.totalText}>{this.state.allCount}<Text style={{fontSize:14}}>人</Text></Text>
						</View>
						<View style={styles.effectItemList}>
							<View style={styles.effectItem}>
								<Text style={styles.effectItemTxt}>原收入</Text>
								<Text style={styles.effectItemTxt}>{this.state.resultObj.originalIncome}元</Text>
							</View>
							<View style={styles.effectItem}>
								<Text style={styles.effectItemTxt}>营销后收入</Text>
								<Text style={styles.effectItemTxt}>{this.state.resultObj.newIncome}元</Text>
							</View>
							<View style={styles.effectItem}>
								<Text style={styles.effectItemTxt}>增收金额</Text>
								<Text style={styles.effectItemTxt}>{this.state.resultObj.income}元</Text>
							</View>
							<View style={styles.effectItem}>
								<Text style={styles.effectItemTxt}>原arpu</Text>
								<Text style={styles.effectItemTxt}>{this.state.resultObj.originalArpu}元</Text>
							</View>
							<View style={styles.effectItem}>
								<Text style={styles.effectItemTxt}>营销后arpu</Text>
								<Text style={styles.effectItemTxt}>{this.state.resultObj.newArpu}元</Text>
							</View>
							<View style={styles.effectItem}>
								<Text style={styles.effectItemTxt}>arpu提升</Text>
								<Text style={styles.effectItemTxt}>{this.state.resultObj.arpu}元</Text>
							</View>
						</View>
						{this.state.inputView}
						<View style={styles.submitWrap}>
							<TouchableOpacity  onPress={() => {this.submitResultForecast()}}>
								<View style={styles.submitBtn}><Text style={styles.submitBtnTxt}  >更新用户池</Text></View>
							</TouchableOpacity>
						</View>
					</View>
				</View>
				</KeyboardAwareScrollView>
				<Toast 
					ref="toast"  
					position="bottom"
					positionValue={460}
					fadeInDuration={750}
                    fadeOutDuration={1000}
                    opacity={0.8}
				/>
			</ScrollView>

		)
	}
}

const styles=StyleSheet.create({
	topLeftImg:{
		width:22,
		height:22,
		marginLeft:10
	},
	submitWrap:{
		justifyContent:'center',
		alignItems:'center',
		marginTop:20
	},
	submitBtnTxt:{
		color:'#fff',
		fontSize:16
	},
	submitBtn:{
		color:'#fff',
		backgroundColor:'#f54545',
		height:40,
		paddingLeft:40,
		paddingRight:40,
		lineHeight:40,
		borderRadius:4,
		justifyContent:'center',
		alignItems:'center'
	},
	label:{
		color:'#4a4a4a',
		marginTop:10,
		marginBottom:5,
		fontSize:14
	},
	textInput:{
		borderWidth:1,
		borderColor:'#e6e6e6',
		height:40,
		paddingLeft:10,
		paddingRight:10,
		borderRadius:4,
		width:'80%'
	},
	effectItemTxt:{
		textAlign:'center',
		fontSize:14,
		color:'#4a4a4a',
		marginBottom:5
	},
	effectItem:{
		width:'33.33333%',
		marginTop:20
	},
	effectItemList:{
		flexDirection:'row',
		justifyContent:'space-between',
		flexWrap:'wrap',
		marginTop:10,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6',
		paddingBottom:20
	},
	totalTextTitle:{
		textAlign:'center',
		color:'#4a4a4a',
		fontSize:14
	},
	totalText:{
		textAlign:'center',
		color:'#f54545',
		fontSize:30,
		marginTop:5
	},
	effectContent:{
		paddingTop:20,
		paddingBottom:20
	},
	policySubTitleText:{
		color:'#ccc',
		textAlign:'center'
	},
	policySubTitle:{
		paddingTop:20
	},
	policiesContent:{
		paddingTop:20,
		paddingBottom:20,
		flexDirection:'row',
		flexWrap:'wrap',
		justifyContent:'center'
	},
	policyItem:{
		paddingTop:5,
		paddingRight:10,
		paddingBottom:5,
		paddingLeft:10,
		borderWidth:1,
		borderColor:'#ccc',
		color:'#ccc',
		borderRadius:14,
		marginBottom:10,
		marginLeft:5,
		marginRight:5
	},
	policyItemSelected:{
		borderColor:'#f54545',
		color:'#f54545'
	},
	policyContent:{
		backgroundColor:'#fff',
		marginTop:10,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6',
		borderTopWidth:1,
		borderTopColor:'#e6e6e6',
		paddingLeft:10,
		paddingRight:10
	},
	policyTitle:{
		flexDirection:'row',
		alignItems:'center',
		paddingTop:10,
		paddingBottom:10,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6'
	},
	policyTitleText:{
		fontSize:16,
		marginLeft:5,
		color:'#757575'
	},
	policyImage:{
		width:20,
		height:20
	},
	stepWrap:{
		backgroundColor:'#fff',
		flexDirection:'row',
		alignItems:'center',
		justifyContent:'space-around',
		paddingTop:5,
		paddingBottom:5,
		borderBottomWidth:1,
		borderBottomColor:'#e6e6e6'
	},
	stepItem:{
		
	},
	stepImage:{
		width:50,
		height:50
	},
	stepTxt:{
		textAlign:'center',
		fontSize:10,
		marginTop:3,
		color:'#757575'
	},
	stepTxtActive:{
		color:'#f54545'
	},
	stepLine:{
		width:30,
		height:1,
		marginLeft:0,
		marginRight:0,
		marginBottom:10,
		backgroundColor:'#e6e6e6'
	},
	stepLineActive:{
		backgroundColor:'#f54545'
	}
})